<template>
  <view>
    <u-sticky>
      <view class="m-head1">
        <image class="bg" mode="widthFix" :src="imageUrl +'list/bg1.png'"></image>
        <u-navbar leftText="选择停车场" @rightClick="rightClick" :autoBack="true" placeholder :safeAreaInsetTop="true"
                  :bgColor="bgColor">
        </u-navbar>
        <view class="m-searchp1 m-searchh1" slot="left">
          <view class="wp">
            <view class="inner">
              <view class="right" >
                <u-search placeholder="快速搜索停车场" :showAction="false" v-model="searchValue"></u-search>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-sticky>
    <view class="wp">
      <view class="ul-selectm1">
        <view v-for="(item, index) in searchResult" :key="index" class="list-item" @click="selectItem(item)">
          <view class="radio-wrapper" v-if="false">
            <view class="radio" :class="{ active: selectedIndex === index }">
              <view v-if="selectedIndex === index" class="radio-inner">
                <image :src="imageUrl +'list/rad-1.svg'" class="icon" mode="aspectFill"></image>
              </view>
            </view>
          </view>
          <view class="content">
            <view class="title">{{ item.name }}</view>
            <view class="address">
              <image :src="imageUrl +'list/map-point.svg'" class="icon" mode="widthFix"></image>
              <text class="address-text">{{ item.address }}</text>
            </view>
          </view>
          <view class="more-icon">
            <image :src="imageUrl +'list/arr4.svg'" class="icon" mode="widthFix"></image>
          </view>
        </view>
      </view>

    </view>
    <view class="g-ht"></view>
    <view class="g-dwbtn" v-if="false">
      <navigator url="/pages/monthlycard/det" class="g-submit2" :class="{ active: selectedIndex !== -1 }"
                 @click="handleSelect" hover-class="none">
        选择
      </navigator>
    </view>

  </view>
</template>

<script>
import {getParams} from '../../api/myHttps';

export default {
  data() {
    return {
      searchValue: "",
      // 头部背景色
      bgColor: 'transparent',
      selectedIndex: -1, // 当前选中的索引，-1表示未选中
      parkList: []

    }
  },
  computed: {
    searchResult() {
      // 如果搜索值为空，则返回全部停车场列表
      if (!this.searchValue) {
        return this.parkList;
      }

      // 根据搜索值过滤parkList，并返回过滤后的结果
      return this.parkList.filter(item => {
        // 使用includes方法进行模糊匹配
        return item.name.toLowerCase().includes(this.searchValue.toLowerCase());
      }).map(item => {
        // 对于匹配到的部分，可以使用HTML标签包裹以改变颜色或样式
        let searchRegex = new RegExp(`(${this.escapeRegExp(this.searchValue)})`, 'gi');
        item.highlightedName = item.name.replace(searchRegex, '<span style="color:red">$1</span>');
        return item;
      });
    },
  },
  onShow() {
    this.getNearParkList()
  },
  methods: {
    // 添加此方法用于转义正则表达式中的特殊字符
    escapeRegExp(string) {
      return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $&表示匹配整个字符串
    },
    getNearParkList() {
      let params = {
        ownerId: uni.getStorageSync("ownerId"),
        current: 1,
        size: -1,
        userLatitude: uni.getStorageSync("userLatitude"),
        userLongitude: uni.getStorageSync("userLongitude"),
        parkName: this.searchValue
      };

      getParams('/city-mobile/user/pageParkJoinGroup', params).then((res) => {
        this.parkList = res.records;
      })

    },
    // 选择项目
    selectItem(item) {
      console.log(JSON.stringify(item));
      uni.navigateTo({
        url: '/pages/monthlycard/monthlycard?parkItem=' + encodeURIComponent(JSON.stringify(item))
      })
    },


  }
}
</script>

<style>
page {
  background-color: #F4FAF7;
}

.m-searchh1 {
  padding-bottom: 0;
}
</style>
